<template>
  <div class="footer">
    <div class="tips">
      <div class="auto">
        <dl>
          <dt>
            <h2>接待QQ群:</h2>
            <figure><a>985549204</a></figure>
            <h2>寻亲咨询:</h2>
            <figure><b>18663530789</b></figure>
            <p>(周一至周日 9:00-19:00)</p>
          </dt>
          <dd>
            <figure>
              <img
                src="http://www.tianyaxunqin.com/UploadFiles/image/20171123/Home5_img3.jpg"
              />
            </figure>
            官方微博
          </dd>
          <dd>
            <figure>
              <img
                src="http://www.tianyaxunqin.com/UploadFiles/image/20200323/%E5%A4%A9%E6%B6%AF%E5%AF%BB%E4%BA%B2%E7%BD%91%E4%BA%8C%E7%BB%B4%E7%A0%81.jpg"
              />
            </figure>
            微信公众号
          </dd>
          <dd>
            <figure>
              <img
                src="http://www.tianyaxunqin.com/UploadFiles/image/20200324/%E5%A4%A9%E6%B6%AF%E5%AF%BB%E4%BA%B2%E5%AE%A2%E6%9C%8D.jpg"
              />
            </figure>
            客服微信
          </dd>
        </dl>
      </div>
    </div>
    <div class="footer-bottom">
      <div class="footerList">
        <div class="footerItem">
          <h4>紧急寻亲</h4>
          <ul class="footerItemCon">
            <li>紧急寻亲</li>
          </ul>
        </div>
        <div class="footerItem">
          <h4>紧急寻亲</h4>
          <ul class="footerItemCon">
            <li>家寻亲人</li>
            <li>亲人寻家</li>
            <li>救助站专栏</li>
            <li>公安协助专栏</li>
            <li>海外寻亲</li>
            <li>爱心拍客</li>
          </ul>
        </div>
        <div class="footerItem">
          <h4>公益捐助</h4>
          <ul class="footerItemCon">
            <li>乐捐项目</li>
            <li>个人公益捐</li>
            <li>荣誉榜</li>
          </ul>
        </div>
        <div class="footerItem">
          <h4>互助社区</h4>
          <ul class="footerItemCon">
            <li>论坛</li>
            <li>微信群</li>
          </ul>
        </div>
        <div class="footerItem">
          <h4>常见问题</h4>
          <ul class="footerItemCon">
            <li>寻亲指南</li>
            <li>登记流程</li>
            <li>防拐常识</li>
          </ul>
        </div>
        <div class="footerItem">
          <h4>天涯寻亲公益</h4>
          <ul class="footerItemCon">
            <li>善行善谈</li>
            <li>视频专区</li>
          </ul>
        </div>
        <div class="footerItem">
          <h4>援助驿站</h4>
          <ul class="footerItemCon">
            <li>援助驿站</li>
          </ul>
        </div>
        <div class="footerItem">
          <h4>我们的行动</h4>
          <ul class="footerItemCon">
            <li>新闻中心</li>
            <li>寻亲喜报</li>
            <li>活动报道</li>
            <li>寻亲故事</li>
            <li>社区活动</li>
          </ul>
        </div>
        <div class="footerItem">
          <h4>关于我们</h4>
          <ul class="footerItemCon">
            <li>发起人</li>
            <li></li>
            <li>天涯寻亲</li>
            <li>爱心招募</li>
            <li>网上留言</li>
            <li>爱心链接</li>
            <li>联系我们</li>
          </ul>
        </div>
      </div>
      <div class="copyright">
        <ul class="helpLink">
          <li>
            关于我们
            <span class="space"></span>
          </li>
          <li>
            联系我们
            <span class="space"></span>
          </li>
          <li>
            关于我们
            <span class="space"></span>
          </li>
          <li>
            商家入驻
            <span class="space"></span>
          </li>
          <li>
            营销中心
            <span class="space"></span>
          </li>
          <li>
            友情链接
            <span class="space"></span>
          </li>
          <li>
            关于我们
            <span class="space"></span>
          </li>
          <li>
            营销中心
            <span class="space"></span>
          </li>
          <li>
            友情链接
            <span class="space"></span>
          </li>
          <li>关于我们</li>
        </ul>
        <p>地址：北京市昌平区宏福科技园综合楼6层</p>
        <p>京ICP备19006430号</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  // vue插件控制台会显示以标签形式
  name: "Footer",

  data() {
    return {};
  },

  mounted() {},

  methods: {},
};
</script>

<style lang="less" scoped>
.footer {
  .tips {
    display: block;
    padding: 40px 0 30px;
    background-color: #eff1f2;

    .auto {
      margin: 0 auto;
      width: 1240px;

      dl {
        width: 1140px;
        margin: 0 auto;
        overflow: hidden;
        clear: both;

        dt {
          float: right;
          width: 331px;

          h2 {
            margin: 0 0 3px;
            font-size: 14px;
            color: #636363;
            margin-block-start: 0.83em;
            margin-block-end: 0.83em;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
            font-weight: bold;
          }

          figure {
            width: 182px;
            height: 45px;
            line-height: 45px;
            background: url(./images/footer_telbg.png) no-repeat;
            display: block;
            margin-bottom: 15px;
            margin-block-start: 1em;
            margin-block-end: 1em;
            margin-inline-start: 40px;
            margin-inline-end: 40px;
            margin: 0px;
            padding: 0px;

            a {
              font-weight: bold;
              background-position: 15px 2px;
              color: #fff;
              padding-left: 36px;
              // 雪碧图
              background: url(./images/footer_icon1.png) no-repeat 15px -37px;
            }

            b {
              font-weight: bold;
              background-position: 15px 2px;
              color: #fff;
              padding-left: 36px;
              background: url(./images/footer_icon1.png) no-repeat 15px -37px;
            }
          }

          p {
            color: #9d9d9d;
            margin: -12px 0 0;
            padding-left: 15px;
            display: block;
            margin-block-start: 1em;
            margin-block-end: 1em;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
          }
        }

        dd {
          float: left;
          margin-left: 120px;
          text-align: center;
          margin-top: 30px;
          color: #9d9d9d;
          display: block;
          margin-inline-start: 40px;
          figure {
            padding: 5px;
            border: 1px solid #333;
            margin-bottom: 5px;
            img {
              width: 105px;
              height: 105px;
              display: block;
            }
          }
        }
      }
    }
  }

  .footer-bottom {
    margin: 0 auto;
    padding: 0;
    background: #292f34;
    text-align: center;

    .footerList {
      padding: 20px;
      border-bottom: 1px solid #292f34;
      border-top: 1px solid #292f34;
      overflow: hidden;
      padding-left: 10px;

      .footerItem {
        width: 120px;
        margin-left: 20px;
        float: left;
        color: #dedede;

        h4 {
          font-size: 14px;
          margin-bottom: 20px;
        }

        .footerItemCon {
          li {
            line-height: 18px;
            color: #979797;
            margin-bottom: 10px;
          }
        }

        &:last-child img {
          width: 121px;
        }
      }
    }

    .copyright {
      padding: 50px;
      color: #979797;

      .helpLink {
        text-align: center;

        li {
          display: inline;

          .space {
            border-left: 1px solid #666;
            width: 1px;
            height: 13px;
            background: #666;
            margin: 8px 10px;
          }
        }
      }

      p {
        margin: 10px 0;
        text-align: center;
      }
    }
  }
}
</style>